<template>
  <el-container class="login-one" >
    <el-header></el-header>
    <el-main>
      <br> <br> <br> <br> <br> <br>
      <el-row>
        <el-col :span="8">&nbsp;</el-col>
        <el-col :span="8"  style="background-color: white;border-radius: 5px;">
          <br>
          <h1 align="center">用户登录</h1>
          <br>
          <el-form :model="userInfo" label-width="100px">
            <el-form-item label="用户:">
              <el-col :span="20">
                <el-input v-model="userInfo.userName"  ></el-input>

              </el-col>

            </el-form-item>
            <el-form-item label="密码:">
              <el-col :span="20">
                <el-input v-model="userInfo.userPwd" show-password></el-input>
              </el-col>
            </el-form-item>

            <el-form-item >
              <el-button type="success" icon="el-icon-user-solid" size="mini" @click="login">登录</el-button>
              <el-button type="success" icon="el-icon-user-solid" size="mini">考生注册</el-button>
            </el-form-item>
          </el-form>


        </el-col>
        <el-col :span="8">&nbsp;</el-col>
      </el-row>
    </el-main>
  </el-container>
</template>

<script>

  export default {
    name:"hello",
    data(){
      return{
        userInfo:{
          userName:"pig",
          userPwd:"123"
        }
      }
    },
    methods:{
         login(){ //登录
           /*post请求的简写*/
           const _this=this;
           //this.$http.defaults.headers.Authorization=localStorage.getItem("token");
           const http =this.$http.post("/user-info/user",this.userInfo);
           //成功回调
           http.then(function (rs) {
             console.log(rs.data);
             if(rs.data.code==200){
               _this.$message(rs.data.msg);
               //存入token
               localStorage.setItem("token",rs.data.token);

               //访问主页面
               _this.$router.replace("/index");
              //记录登录的用户状态
               sessionStorage.setItem("userName",_this.userInfo.userName);
               //记录当前用户的当前的角色信息
               sessionStorage.setItem("power","leader");


             }

           });
         }
    },
    directives:{//自定义局部指令
        focus:{//自定义指令名称
          inserted:function (el) {
              el.focus();
          }
        },
       stopRight:{//禁用右键菜单
            inserted:function (el) {
              // 禁用右键菜单
              document.addEventListener('contextmenu', event => event.preventDefault());
            }
       }

    }

  }
</script>

<style  >
  @import url("../assets/css/my.css");
</style>
